<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市联动</title>
</head>
<script src="./index.js"></script>

<body>
    <!-- 
        省市联动
            思路分析：
                1、准备元素：定义省份与城市的下拉框
                2、绑定元素：绑定省份下拉框的change事件
                3、准备数据：定义数组存放省份数据，定义二维数组存放城市数据
                4、初始化数据：将数组中的省份数据填充到省份下拉框中
                5、下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市，并填充到城市下拉框中

                创建文件节点    createTextNode()
                创建元素    createElement()
                追加子元素  appendChild()
    -->
    <div>
        <label>省份：</label>
        <select name="provinces">
            <option>请选择</option>
        </select>
        <label>城市：</label>
        <select name="cities">
            <option>请选择</option>
        </select>
    </div>

</body>

</html>